<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_弹性盒子-主侧轴对齐-justify-content</title>
        <style>
            .container {
                width: 480px;
                height: 615px;
                border: 5px dashed red;
                display: flex;
            }
            

            .item {
                box-sizing: border-box;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background-color: darkseagreen;
            } 




            /* 带flex-basis的计算方式是 */

            /* （1）(flex-shrink * flex-basis) / (flex-shrink * flex-basis的和) */

            /*  a. (flex-shrink * flex-basis) 分别为
                    1 * 150
                    2 * 200
                    3 * 250
            */

            /*  b.(flex-shrink * flex-basis的和) 
                1 * 150 + 2 * 200 + 3 * 250 = 1300
            */

            /* （2）使用各个比例来乘以（600-480）
                150 / 1300 * 120 ===要收缩的值

                实际的值是150 - 要收缩的值  （150 / 1300 * 120）
            */

            .item01 {
                flex-shrink: 1;
                flex-basis: 150px;
            }
            /* 136.22   163.11 180.69*/

            .item02 {
                flex-shrink: 2;
                flex-basis: 200px;
            }

            .item03 {
                flex-shrink: 3;
                flex-basis: 250px;
            }
              
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item01">1</div>
            <div class="item item02">2</div>
            <div class="item item03">3</div>
        </div>
    </body>
</html>